<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>

</head>
<body>

<div id="div1" >

    <div>
    用户名： <input type="text" v-model="username">
    </div>
    <div>
    密码： <input type="text" v-model="password">
    </div>
    <div>
        {{username_password}}
    </div>

</div>
<script>


    const vueObj = new Vue({
        el: '#div1',
        data: {
            username: 'zhangsan',
            password: '123',
            username_password: 'zhangsan 123',
        },

        watch: {
            username: function (value) {     //value是username里面的值
                console.log("监听username")
                console.log(this);
                // console.log('value' + value);
                this.username_password = value + ' ' + this.password;
            },
            password: function (value) {
                console.log("监听 password")
                this.username_password = this.username + ' ' + value;
            }
        }
    });



</script>
</body>
</html>